<template>
  <div class=" ">
    <van-nav-bar title="发布房源" left-arrow @click-left="onClickLeft" />
    <ul>
      <li>
        <span class="hared">房源信息</span>
      </li>
      <van-divider />
      <li>
        <div class="hared-xq">
          <span class="l">小区名称</span
          ><span class="r">请输入小区或地址></span>
        </div>
      </li>
      <van-divider />
      <li class="flex">
        <van-field
          v-model="number"
          type="number"
          label="租金"
          placeholder="请输入租金/月"
        />
        <span>￥/月</span>
      </li>
      <li class="flex">
        <van-field
          v-model="number2"
          type="number"
          label="建筑面积"
          placeholder="请输入建筑面积"
        />
        <span>㎡</span>
      </li>
      <!-- 户型 -->
      <li class="picker">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="户型"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </li>
      <!-- 所在楼层 -->
      <li class="picker">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value2"
          label="所在楼层"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
      </li>
      <!-- 朝向 -->
      <li class="picker">
        <van-field
          readonly
          clickable
          name="picker"
          :value="value3"
          label="朝向"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom" class="oo">
          <van-picker
            show-toolbar
            :columns="columns3"
            @confirm="onConfirm3"
            @cancel="showPicker3 = false"
          />
        </van-popup>
      </li>
      <!-- 房屋标题 -->
      <li class="biaoti"><p>房屋标题</p></li>
      <van-divider />
      <div class="biaotiText">
        <input
          type="text"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </div>
      <!-- 房屋图像 -->
      <li class="biaoti"><p>房屋图像</p></li>
      <van-divider />
      <van-uploader v-model="fileList" multiple />
      <!-- 房屋配置 -->
      <li class="biaoti"><p>房屋配置</p></li>
      <van-grid :column-num="5" :border=false  >
        <van-grid-item icon="photo-o" text="衣柜" @click="AddFn" />
        <van-grid-item icon="photo-o" text="洗衣机" @click="AddFn"  />
        <van-grid-item icon="fire-o" text="天然气"   @click="AddFn" />
        <van-grid-item icon="photo-o" text="冰箱"  @click="AddFn"  />
        <van-grid-item icon="photo-o" text="空调"  @click="AddFn" />
        <van-grid-item icon="photo-o" text="暖气"  @click="AddFn" />
        <van-grid-item icon="photo-o" text="电视"  @click="AddFn" />
        <van-grid-item icon="photo-o" text="热水器"  @click="AddFn" />
        <van-grid-item icon="photo-o" text="宽带"  @click="AddFn" />
        <van-grid-item icon="photo-o" text="沙发"  @click="AddFn"   />
      </van-grid>
      <li class="biaoti"><p>房屋描述</p></li>
      <van-divider />
    </ul>
    <div class="foot">
      <van-field
      v-model="message"
      type="textarea"
      placeholder="请输入房屋描述信息"
    />
    </div>
    <div class="Foot-H">
      <div class="ll" @click="qx">取消</div>
      <van-dialog  v-model="show" title="提示" message="放弃发布房源？" confirm-button-text="继续编辑" cancel-button-text="放弃"  show-cancel-button>
</van-dialog>
      <div class="rr">确定</div>
    </div>
  </div>
</template>

<script>
// import { Dialog } from 'vant'
import { Params } from '@/api/article'
export default {
  data () {
    return {
      message: '',
      number: '',
      number2: '',
      value: '请选择>',
      value2: '请选择>',
      value3: '请选择>',
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      columns: [],
      columns2: [],
      columns3: [],
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      params: '',
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true }
      ],
      show: false
    }
  },
  async created () {
    const { body } = await Params()
    // console.log(res)
    body.roomType.forEach((item) => {
      this.columns.push(item.label)
    })
    body.floor.forEach((item) => {
      this.columns2.push(item.label)
    })
    body.oriented.forEach((item) => {
      this.columns3.push(item.label)
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onConfirm (value) {
      console.log(value)
      this.value = value
      this.showPicker = false
    },
    onConfirm2 (value2) {
      console.log(value2)
      this.value2 = value2
      this.showPicker2 = false
    },
    onConfirm3 (value3) {
      console.log(value3)
      this.value3 = value3
      this.showPicker3 = false
    },
    AddFn (e) {
      if (e.target.classList.contains('colorss') === true) {
        console.log(e)
        e.target.classList.remove('colorss')
      } else {
        e.target.classList.add('colorss')
      }
    },
    qx () {
      this.show = true
    }
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
::v-deep .colorss{
  color: #21b97a;
}

ul {
  width: 100%;
}
.hared {
  color: #21b97a;
}
.hared-xq {
  display: flex;
}
.hared-xq .l {
  margin-right: 180px;
  font-size: 14px;
  color: #666;
}
.hared-xq .r {
  font-size: 14px;
  color: #888;
}
li {
  width: auto;
  height: 41px;
  line-height: 41px;
  padding: 0 15px;
}
::v-deep .van-cell,
.van-field {
  height: 100%;
  line-height: 41px;
}
::v-deep .van-field__control {
  line-height: 25px;
}
ul .flex {
  display: flex;
}
ul .flex span {
  width: 70px;
  text-align: center;
  color: #8888;
}
::v-deep .van-field__control {
  width: 200px;
}
::v-deep li .van-ellipsis {
  color: black;
}
::v-deep [name="picker"] {
  text-align: right;
  color: #888;
}
::v-deep .picker .van-cell__value,
.van-field__value {
  margin-left: 25px;
}
.biaoti {
  font-size: 14px;
  color: #333;
}
.biaotiText {
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
}
.biaotiText input {
  width: 100%;
  height: 25px;
  border: 0;
  font-size: 14px;
}
.biaotiText input::placeholder {
  color: #ccc;
}
::v-deep .van-field__body {
  margin-top: 10px;
  margin-left: 15px;
}
::v-deep .foot{
  padding: 0 15px;
}
::v-deep .foot .van-field__body{
  height: 130px;
  margin: 0;
}
.Foot-H {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.Foot-H .ll,.rr{
  flex: 1;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background-color: #21b97a;
}
.Foot-H .ll {
  background-color: #fff;
  color: #21b97a;
}
</style>
